<template>
	<view>
		<!-- #ifdef APP-PLUS -->
		<view>
			<uni-nav-bar left-icon="arrowleft" @clickLeft="back" title="搜索" :statusBar='true' :fixed="true"></uni-nav-bar>
		</view>
		<!-- #endif -->
		<view class="search">
			<view class="search-inputwrap">
				<input @confirm="onConfirmValue" placeholder="搜索你喜欢的店" class="search-inputwrap-input" />
				<text @click="onClickGotoBack" class="search-inputwrap-txt">取消</text>
			</view>
			<view v-if="(historyList !== undefined) && historyList.length" class="search-inputwrap-history">
				<view class="search-inputwrap-history-content">
					<view class="search-inputwrap-history-content-title">
						<text class="search-inputwrap-history-content-title-left">搜索历史</text>
						<text @click="onClickClearHistoryList" class="search-inputwrap-history-content-title-right">删除</text>
					</view>
					<view class="search-inputwrap-history-content-list">
						<block v-for="item of historyList" :key="item.id">
							<text @click="onClickGotoSearchResultPage(item.txt)" class="search-inputwrap-history-content-list-item">{{ item.txt }}</text>
						</block>
					</view>
				</view>
			</view>
			<view class="search-inputwrap-history">
				<view class="search-inputwrap-history-content">
					<view class="search-inputwrap-history-content-title">
						<text class="search-inputwrap-history-content-title-left">热门搜索</text>
					</view>
					<view class="search-inputwrap-history-content-list">
						<block v-for="item of hotList" :key="item">
							<text @click="onClickGotoSearchResultPage(item)" class="search-inputwrap-history-content-list-item">{{ item }}</text>
						</block>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { config } from '@/utils/config.js'
	import { myMixin } from '@/utils/mixin.js'
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'

	export default {
		mixins: [myMixin],
		data() {
			return {
				historyList: [],
				hotList: []
			}
		},
		components: {
			uniNavBar
		},
		onLoad() {
			this._beginGetHistoryList()
			this._getHotData()
		},
		methods: {
			// 回退
			back() {
				uni.navigateBack({})
			},
			// 开始从本地存储拿到搜索的历史记录
			_beginGetHistoryList() {
				const historyList = uni.getStorageSync('historyList')
				if ((historyList !== undefined) && historyList.length) {
					this.historyList = historyList
				} else {
					this.historyList = []
				}
			},
			// 删除历史记录
			onClickClearHistoryList() {
				uni.showModal({
					content: '是否删除历史记录',
					success: ((res) => {
						if (res.confirm) {
							uni.removeStorageSync('historyList')
							this._beginGetHistoryList()
						}
					})
				})
			},
			// input框，点击完成触发的事件
			onConfirmValue(e) {
				let myvalue = e.detail.value
				if (!myvalue) {
					return false
				}
				myvalue = myvalue.replace(/(^\s*)|(\s*$)/g, "")
				const historyList = JSON.parse(JSON.stringify(this.historyList)) || []
				let myIndex = undefined
				for (const index in historyList) {
					if (historyList[index].txt === myvalue) {
						myIndex = index
						break
					}
				}
				if (myIndex !== undefined) {
					historyList.splice(myIndex, 1)
					const obj = {}
					obj.txt = myvalue
					obj.id = Math.random()
					historyList.unshift(obj)
				} else {
					const obj = {}
					obj.txt = myvalue
					obj.id = Math.random()
					historyList.unshift(obj)
				}
				this.historyList = historyList
				uni.setStorageSync('historyList', this.historyList)
				uni.navigateTo({
					url: `../searchresult/searchresult?keywords=${myvalue}`
				})
			},
			onClickGotoBack() {
				uni.navigateBack({})
			},
			onClickGotoSearchResultPage(item) {
				if (!item) {
					return false
				}
				uni.navigateTo({
					url: `../searchresult/searchresult?keywords=${item}`
				})
			},
			_getHotData() {
				uni.showLoading({ title: '加载中' })
				uni.request({
					url: `${config.api_base_url}log/searchLog/popularSearch`,
					success: ((res) => {
						let { status, data } = res.data
						if (status.flag === true) {
							this.hotList = data
						} else {
							this.hotList = []
						}
					}),
					fail: (() => {
						this.hotList = []
					}),
					complete: (() => {
						uni.hideLoading()
					})
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #fff;
	}
</style>
<style scoped>
	.search {
		width: 100%;
		border-top: 1px solid #f2f2f2;
	}

	.search-inputwrap {
		width: 100%;
		box-sizing: border-box;
		padding-left: 32rpx;
		padding-right: 32rpx;
		height: 106rpx;
		line-height: 106rpx;
		display: flex;
		align-items: center;
	}

	.search-inputwrap-input {
		padding: 0;
		margin: 0;
		outline: none;
		border: none;
		width: 590rpx;
		height: 70rpx;
		line-height: 70rpx;
		background-color: #F5F5F5;
		border-radius: 4rpx;
		box-sizing: border-box;
		padding-left: 24rpx;
		font-size: 28rpx;
		font-weight: 400;
	}

	.search-inputwrap-txt {
		font-size: 32rpx;
		font-weight: 400;
		color: #333333;
		line-height: 44rpx;
		margin-right: 0;
		margin-left: auto;
	}

	.search-inputwrap-history {
		box-sizing: border-box;
		padding-top: 30rpx;
		width: 100%;
		padding-left: 32rpx;
		padding-right: 32rpx;
	}

	.search-inputwrap-history-content {
		padding-bottom: 48rpx;
		border-bottom: 2rpx solid #EEEEEE;
	}

	.search-inputwrap-history:last-child .search-inputwrap-history-content {
		padding-bottom: 0;
		border-bottom: none;
	}

	.search-inputwrap-history-content-title {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
	}

	.search-inputwrap-history-content-title-left {
		font-size: 36rpx;
		font-weight: 600;
		line-height: 50rpx;
		color: #333333;
	}

	.search-inputwrap-history-content-title-right {
		color: #1677FF;
		font-size: 24rpx;
		font-weight: 400;
		line-height: 34rpx;
		margin-top: 12rpx;
		margin-right: 8rpx;
	}

	.search-inputwrap-history-content-list {
		width: 100%;
		margin-top: 28rpx;
	}

	.search-inputwrap-history-content-list-item {
		font-size: 28rpx;
		color: #333333;
		font-weight: 400;
		padding: 12rpx 24rpx 12rpx 24rpx;
		border-radius: 12rpx;
		background-color: #F5F5F5;
		margin-right: 24rpx;
		margin-bottom: 24rpx;
		display: inline-block;
	}
</style>
